<!DOCTYPE html>
<html lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"
    />
    <title>大众点评</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="./css/element.css" />

    <link href="./css/shop-list.css" rel="stylesheet" />
    <link href="./css/main.css" rel="stylesheet" />

    <style type="text/css"></style>
  </head>
  <body>
    <div id="app">
      <div class="header">
        <div class="header-back-btn" @click="goBack">
          <i class="el-icon-arrow-left"></i>
        </div>
        <div class="header-title">{{typeName}}</div>
        <div class="header-search">
          <i class="el-icon-search"></i>
        </div>
      </div>
      <div class="sort-bar">
        <div class="sort-item">
          <el-dropdown trigger="click" @command="handleCommand">
            <span class="el-dropdown-link">
              {{typeName}}<i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item v-for="t in types" :key="t.id" :command="t">
                {{t.name}}
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
        <div class="sort-item" @click="sortAndQuery('distance')">
          距离 <i class="el-icon-arrow-down el-icon--right"></i>
        </div>
        <div class="sort-item" @click="sortAndQuery('comments')">
          人气 <i class="el-icon-arrow-down el-icon--right"></i>
        </div>
        <div class="sort-item" @click="sortAndQuery('score')">
          评分 <i class="el-icon-arrow-down el-icon--right"></i>
        </div>
      </div>
      <div class="shop-list" @scroll="onScroll">
        <div
          class="shop-box"
          v-for="s in shops"
          :key="s.id"
          @click="toDetail(s.id)"
        >
          <div class="shop-img"><img :src="s.images" alt="" /></div>
          <div class="shop-info">
            <div class="shop-title shop-item">{{s.name}}</div>
            <div class="shop-rate shop-item">
              <el-rate
                disabled
                v-model="s.score/10"
                text-color="#F63"
                show-score
              ></el-rate>
              <span>{{s.comments}}条</span>
            </div>
            <div class="shop-area shop-item">
              <span>{{s.area}}</span>
              <span v-if="s.distance">
                {{s.distance < 1000 ? s.distance.toFixed(1) + 'm' :
                (s.distance/1000).toFixed(1) + 'km'}}
              </span>
            </div>
            <div class="shop-avg shop-item">￥{{s.avgPrice}}/人</div>
            <div class="shop-address shop-item">
              <i class="el-icon-map-location"></i>
              <span>{{s.address}}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <script src="./js/vue.js"></script>
    <script src="./js/axios.min.js"></script>
    <!-- 引入组件库 -->
    <script src="./js/element.js"></script>
    <script src="./js/common.js"></script>
    <script>
      const app = new Vue({
        el: "#app",
        data: {
          util,
          isReachBottom: false,
          types: [
            {
              name: "火锅",
              icon: "types/amzl.png",
            },
            {
              name: "酒吧",
              icon: "types/amzl.png",
            },
            {
              name: "门店",
              icon: "types/amzl.png",
            },
            {
              name: "日料",
              icon: "types/amzl.png",
            },
            {
              name: "烧烤",
              icon: "types/amzl.png",
            },
            {
              name: "外卖",
              icon: "types/amzl.png",
            },
            {
              name: "西餐",
              icon: "types/amzl.png",
            },
            {
              name: "中餐",
              icon: "types/amzl.png",
            },
            {
              name: "24h",
              icon: "types/amzl.png",
            },
            {
              name: "服务",
              icon: "types/amzl.png",
            },
          ], // 类型列表
          shops: [], // 商店列表
          typeName: "",
          params: {
            typeId: 0,
            current: 1,
            x: null,
            y: null,
            sortBy: "", // 当前排序方式，默认为按距离排序
          },
        },
        created() {
          // 获取参数
          this.params.typeId = util.getUrlParam("type");
          this.typeName = util.getUrlParam("name");
          // 查询类型
          // this.queryTypes();
          // 查询商店
          this.queryShops();
          // this.sortAndQuery(this.sortBy);
        },
        methods: {
          queryTypes() {
            axios
              .get("/shop-type/list")
              .then(({ data }) => {
                this.types = data;
              })
              .catch((err) => {
                console.log(err);
                this.$message.error(err);
              });
          },

          queryShops() {
            // this.params.current = 1;
            // axios
            //   .get("/shop/of/type", {
            //     params: this.params,
            //   })
            //   .then(({ data }) => {
            //     if (!data) {
            //       return;
            //       console.log(data);
            //     }
            //     data.forEach((s) => (s.images = s.images.split(",")[0]));
            //     this.shops = this.shops.concat(data);
            //     console.log(data);
            //   })
            //   .catch((err) => {
            //     console.log(err);
            //     this.$message.error(err);
            //   });
            this.shops = [
              {
                id: 1,
                name: "好想来",
                images: "/imgs/dianpu/haoxianglai.png",
                area: "普陀区庆丰路178号",
                comments: 89,
                isLike: true,
                score: 50,
                distance: 5.6,
                avgPrice: 95,
                address: "浙江省舟山市普陀区",
              },
              {
                id: 2,
                name: "老大坊生煎",
                images: "/imgs/dianpu/shengjian.png",
                area: "学院路325号一层",
                comments: 88,
                isLike: true,
                score: 48,
                distance: 4.4,
                avgPrice: 25,
                address: "浙江省舟山市普陀区",
              },
              {
                id: 2,
                name: "三湘美食",
                images: "/imgs/dianpu/sanxiang.png",
                area: "普陀区金沙路6号",
                comments: 58,
                isLike: true,
                score: 45,
                distance: 2.5,
                avgPrice: 56,
                address: "浙江省舟山市普陀区",
              },
              {
                id: 4,
                name: "湘粤美食饭店",
                images: "/imgs/dianpu/xiangyue.png",
                area: "朱家尖街道莲花北路72号",
                comments: 45,
                isLike: true,
                score: 40,
                distance: 1.2,
                avgPrice: 125,
                address: "浙江省舟山市普陀区",
              },
            ];
          },
          handleCommand(t) {
            // location.href = "/shop-list.html?type=" + t.id + "&name=" + t.name;
          },
          // sortAndQuery(sortBy) {
          //   if(sortBy==='distance'){
          //     // 如果没有typeId参数，则需要获取当前位置坐标并显示所有商店
          //     navigator.geolocation.getCurrentPosition((position) => {
          //       this.params.x = position.coords.longitude;
          //       this.params.y = position.coords.latitude;
          //   })
          //   }else {
          //     this.params.sortBy = sortBy;
          //   }
          //   this.queryShops();
          // },
          sortAndQuery(sortBy) {
            // this.shops = [];
            // this.params.current = 1;
            // if (sortBy === "distance") {
            //   // 如果排序方式为距离，则获取当前用户地址的经度和纬度
            //   this.shops = [];
            //   this.params.sortBy = "";
            //   // this.params.x = this.x;
            //   // this.params.y = this.y;
            //   navigator.geolocation.getCurrentPosition((position) => {
            //     this.params.x = position.coords.longitude;
            //     this.params.y = position.coords.latitude;
            //     // 调用queryShops方法查询商店
            //     this.queryShops();
            //   });
            // } else {
            //   this.shops = [];
            //   this.params.x = null;
            //   this.params.y = null;
            //   this.params.current = 1;
            //   this.params.sortBy = sortBy;
            //   this.queryShops();
            // }
          },
          goBack() {
            history.back();
          },
          toDetail(id) {
            location.href = "/shop-detail.html?id=" + id;
          },
          onScroll(e) {
            let scrollTop = e.target.scrollTop;
            let offsetHeight = e.target.offsetHeight;
            let scrollHeight = e.target.scrollHeight;
            if (
              scrollTop + offsetHeight + 1 > scrollHeight &&
              !this.isReachBottom
            ) {
              this.isReachBottom = true;
              console.log("触底");
              this.params.current++;
              console.log("current" + this.current);
              if (this.current <= this.totalPages) {
                this.queryShops(this.params.current, 5);
              }
            } else {
              this.isReachBottom = false;
            }
          },
        },
      });
    </script>
  </body>
</html>
